<template>
  <div class="boxMove">
    <div class="treeLeft">
      <eltreeList :list="tree_list" :type="2" @handleNodeClick="handleNodeClick" :queryAreaCode="query.queryAreaCode"
        v-if="eltreeShow"></eltreeList>
    </div>
    <div class="y-resize" />
    <div class="right">
      <div class="container">
        <div class="handle-box">
          <!--   <div>
              <span class="title_name"> 设备编号： </span>
              <el-input
                v-model="query.imei"
                placeholder="请输入"
                class="handle-input mr10"
              ></el-input>
            </div> -->
          <div>
            <span class="title_name">楼层： </span>
            <el-select v-model="query.queryFloor" placeholder="请选择" class="handle-select mr10">
              <el-option v-for="item in floorList" :key="item" :label="item + '楼'" :value="item"></el-option>
            </el-select>
          </div>
          <div>
            <span class="title_name"> 教室号：</span>
            <el-input v-model="query.queryRoomNum" placeholder="请输入" class="handle-input mr10"></el-input>
          </div>
          <div>
            <span class="title_name">送电状态： </span>
            <el-select v-model="query.queryState" placeholder="请选择" class="handle-select mr10">
              <el-option v-for="item in queryStateType" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <span class="title_name">通断电状态： </span>
            <el-select v-model="query.queryRunState" placeholder="请选择" class="handle-select mr10">
              <el-option v-for="item in runState" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <span class="title_name">控制模式： </span>
            <el-select v-model="query.queryCtrlModel" placeholder="请选择" class="handle-select mr10">
              <el-option v-for="item in ctrlModel" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <span class="title_name">设备状态： </span>
            <el-select v-model="query.queryOnline" placeholder="请选择" class="handle-select mr10">
              <el-option v-for="item in Online" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <el-button type="primary" class="icon-search" icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button class="icon-search" @click="emptySearch">清空</el-button>
        </div>
        <div class="handle-box1" v-if="CLASSROOM_DEVICEOPERATE">
          <el-button type="primary" class="icon-search" @click="handleAllSelect" v-if="is_checkAll">取消全选</el-button>
          <el-button type="primary" class="icon-search" @click="handleAllSelect" v-else>全选</el-button>
          <el-button type="primary" class="icon-search" @click="handleBatch(1)">批量通电</el-button>
          <el-button type="primary" class="icon-search" @click="handleBatch(2)">批量断电</el-button>
        </div>
        <div class="display_flex_wrap">
          <div class="classroom" v-for="(item, index) in roomList" :key="index">
            <div class="classRoomName activeRoom display_flex3 align-items">
              <el-checkbox v-model="item.checked" @change="handleSelectRoom($event, index, item)" size="large"
                style="margin-left: 20px" />
              <img class="roomIcon" src="../assets/img/room1.png" />
              <div class="classRoomN">
                {{ item.floor }} - {{ item.roomNum }}
              </div>
            </div>
            <div class="modle_content">
              <div class="display_flex3 align-items">
                <img class="icon1" src="../assets/img/icon2.png" />
                <div class="device_title">设备数量:</div>
                <span class="device_value">{{ item.deviceNum }}</span>
              </div>
              <div class="display_flex3 align-items">
                <img class="icon1" src="../assets/img/icon1.png" />
                <div class="device_title">通电时段:</div>
                <span :class="
                  item.state == '应断电' ? 'device_value' : 'devState'
                ">{{ item.state }}</span>
              </div>
            </div>
            <div class="display_flex3 justify-content-center">
              <el-button type="primary" v-if="CLASSROOM_DEVICE" @click="handledevice(item)"
                class="classSchedule">设备</el-button>
              <el-button type="primary" v-if="CLASSROOM_COURSE" @click="handleSchedule(item)"
                class="classSchedule">课表</el-button>
            </div>
          </div>
          <div v-if="roomList.length == 0" class="nodata">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import eltreeList from "../components/eltreeList.vue";
import parsing from "../assets/js/parsing";
import api from "../api/api";
export default {
  components: {
    eltreeList
  },
  setup() {
    let { proxy } = getCurrentInstance();
    const tree_list = ref([]);
    const eltreeShow = ref(false);
    // 设备查看
    const CLASSROOM_DEVICE = ref(false);
    proxy.$permissionList("CLASSROOM_DEVICE").then((res) => {
      CLASSROOM_DEVICE.value = res;
    });
    // 课表查看
    const CLASSROOM_COURSE = ref(false);
    proxy.$permissionList("CLASSROOM_COURSE").then((res) => {
      CLASSROOM_COURSE.value = res;
    });
    // 设备操作
    const CLASSROOM_DEVICEOPERATE = ref(false);
    proxy.$permissionList("CLASSROOM_DEVICEOPERATE").then((res) => {
      CLASSROOM_DEVICEOPERATE.value = res;
    });
    const query = reactive({
      queryAreaCode: "",
      queryState: null,
      queryAreaCode: "",
      queryRoomNum: "",
      imei: "",
      queryEnableState: null,
      queryRunState: null,
      queryCtrlModel: null,
      queryOnline: null,
      queryFloor: null,
      pageNum: 1,
      pageSize: 15,
    });
    const floorList = ref([]);
    const roomList = ref([]);
    const getData = () => {
      is_checkAll.value = false;
      api
        .postFormAPI("backup/classroom/listAirConditioner", query)
        .then((res) => {
          if (res.data.code == 1) {
            if (res.data.data.length > 0) {
              for (var i = 0; i < res.data.data.length; i++) {
                res.data.data[i].checked = false;
              }
            }
            roomList.value = res.data.data || [];
          } else {
            proxy.$ElMessage.error(res.data.message);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    proxy.$getcampusList().then((res) => {
      query.queryAreaCode = parsing.get_default_AreaCode(res);
      tree_list.value = res;
      eltreeShow.value = true;
      getfloorList(query.queryAreaCode).then((res) => {
        floorList.value = res;
      });
      getData();
    });
    const handleNodeClick = (res) => {
      roomList.value = [];
      floorList.value = [];
      selectClassRoom.value = [];
      emptySearch();
      query.queryFloor = null;
      if (res.areaCode.length == 10) {
        query.queryAreaCode = res.areaCode;
        getData();
        getfloorList(res.areaCode).then((res) => {
          floorList.value = res;
        });
      }
    };
    const handleSearch = () => {
      selectClassRoom.value = [];
      is_checkAll.value = false;
      query.pageNum = 1;
      getData();
    };
    const emptySearch = () => {
      query.pageNum = 1;
      query.queryState = null;
      query.queryRoomNum = null;
      query.imei = null;
      query.queryEnableState = null;
      query.queryRunState = null;
      query.queryCtrlModel = null;
      query.queryOnline = null;
      query.queryFloor = null;
    };
    const classRoomDialog = ref(false);
    const Roomdevice = ref(false);
    const roomNum = ref("");
    const areaCode = ref("");
    const regionId = ref("");
    const roomdetail = ref({});
    const handleSchedule = (item) => {
      roomdetail.value = item;
      roomNum.value = item.roomNum;
      areaCode.value = item.areaCode;
      classRoomDialog.value = true;
    };
    const handledevice = (item) => {
      // console.log(item)
      roomdetail.value = item;
      regionId.value = item.regionId;
      roomNum.value = item.roomNum;
      areaCode.value = item.areaCode;
      Roomdevice.value = true;
    };
    const handleClose = () => {
      classRoomDialog.value = false;
      Roomdevice.value = false;
    };
    const is_checkAll = ref(false);
    // 获取选中列表
    const selectClassRoom = ref([]);
    const handleAllSelect = () => {
      is_checkAll.value = !is_checkAll.value;
      selectClassRoom.value = [];
      for (var i = 0; i < roomList.value.length; i++) {
        if (is_checkAll.value) {
          roomList.value[i].checked = true;
          selectClassRoom.value.push(roomList.value[i].regionId);
        } else {
          roomList.value[i].checked = false;
        }
      }
    };
    const handleSelectRoom = (event, index, item) => {
      roomList.value[index].checked = event;
      if (event == true) {
        selectClassRoom.value.push(item.regionId);
      } else {
        for (var i = 0; i < selectClassRoom.value.length; i++) {
          if (selectClassRoom.value[i] == item.regionId) {
            selectClassRoom.value.splice(i, 1);
          }
        }
      }
      // console.log(selectClassRoom.value);
    };
    const handleBatch = (idx) => {
      if (selectClassRoom.value.length == 0) {
        proxy.$ElMessage.error("请选择教室");
        return;
      }
      let runState = null;
      let message = "";
      // 1批量通电 2批量断电
      if (idx == 1) {
        runState = 1;
        message = "批量通电";
      } else {
        runState = 0;
        message = "批量断电";
      }
      ElMessageBox.confirm(
        "该操作仅对处于手控模式中的设备生效，确定" + message + "吗？",
        {
          type: "warning",
        }
      )
        .then((res) => {
          if (res == "confirm") {
            api
              .postFormAPI("backup/classroom/batchOnOffByRegions", {
                regionIdList: selectClassRoom.value,
                runState: runState,
              })
              .then((res) => {
                if (res.data.code == 1) {
                  proxy.$ElMessage.success(message + "成功！");
                  selectClassRoom.value = [];
                  getData();
                } else {
                  proxy.$ElMessage.error(res.data.message);
                }
                //数据处理
              })
              .catch((err) => {
                console.log(err);
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    return {
      query,
      tree_list,
      eltreeShow,
      classRoomDialog,
      floorList,
      Roomdevice,
      roomNum,
      regionId,
      areaCode,
      roomList,
      CLASSROOM_DEVICEOPERATE,
      CLASSROOM_COURSE,
      CLASSROOM_DEVICE,
      roomdetail,
      is_checkAll,
      runState: [
        {
          value: 0,
          label: "断电",
        },
        {
          value: 1,
          label: "通电",
        },
      ],
      queryStateType: [
        {
          value: 0,
          label: "应通电",
        },
        {
          value: 1,
          label: "应断电",
        },
      ],
      ctrlModel: [
        {
          value: 0,
          label: "手控",
        },
        {
          value: 1,
          label: "自控",
        },
      ],
      Online: [
        {
          value: 0,
          label: "离线",
        },
        {
          value: 1,
          label: "在线",
        },
      ],
      handleNodeClick,
      handleSearch,
      emptySearch,
      handleSchedule,
      handleClose,
      handledevice,
      handleAllSelect,
      handleBatch,
      handleSelectRoom,
    };
  },
  data() {
    return {
    }
  },
  mounted() {
    this.handleYResize()
    // this.handleXResize()
  },
  methods: {
    handleYResize() {
      const box = document.getElementsByClassName('boxMove')
      const left = document.getElementsByClassName('left')
      const resize = document.getElementsByClassName('y-resize')
      const right = document.getElementsByClassName('right')
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          // 颜色改变提醒
          resize[i].style.background = '#818181'
          const startX = e.clientX
          resize[i].left = resize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endX = e.clientX
            let moveLen = resize[i].left + (endX - startX) // （endX-startX）=移动的距离。resize[i].left+移动的距离=左侧最终的高度
            const maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            if (moveLen < 30) moveLen = 30 // left最小宽度度为30px
            if (moveLen > maxT - 30) moveLen = maxT - 30 // right最小宽度度为30px

            resize[i].style.left = moveLen // 设置left区域的宽度
            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + 'px'
              right[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function (evt) {
            // 颜色恢复
            resize[i].style.background = '#C0C4CC'
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
    handleXResize() {
      const box = document.getElementsByClassName('boxMove')
      const top = document.getElementsByClassName('top')
      const resize = document.getElementsByClassName('x-resize')
      const bottom = document.getElementsByClassName('bottom')
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          // 颜色改变提醒
          resize[i].style.background = '#818181'
          const startY = e.clientY
          resize[i].top = top[i].offsetHeight
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endY = e.clientY
            let moveLen = resize[i].top + (endY - startY) // （endY-startY）=移动的距离。resize[i].top+移动的距离=上部最终的高度
            const maxT = box[i].clientHeight - resize[i].offsetHeight // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            if (moveLen < 30) moveLen = 30 // top最小高度度为30px
            if (moveLen > maxT - 30) moveLen = maxT - 30 // bottom最小高度度为30px

            resize[i].style.height = moveLen // 设置top区域的高度
            for (let j = 0; j < top.length; j++) {
              top[j].style.height = moveLen + 'px'
              bottom[j].style.height = (box[i].clientHeight - moveLen - 10) + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function (evt) {
            // 颜色恢复
            resize[i].style.background = '#C0C4CC'
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() // 当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() // 该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";

.content {
  overflow: auto;
}

.boxMove {
  width: 100%;
  height: 100%;

  .left,
  .y-resize,
  .right {
    float: left;
    overflow: hidden;
  }

  .left {
    width: calc(20% - 10px);
    height: 100%;
    background: #fff;
  }

  .y-resize {
    width: 3px;
    height: 100%;
    background: #b4b4b4;
    cursor: w-resize;
  }

  .right {
    width: 80%;
    height: 100%;
    // .top,
    // .bottom {
    //   overflow: hidden;
    // }

    // .top {
    //   height: calc(20% - 0.6vh);
    //   background: #C6E2FF;
    //   border-radius: 0 10px 0 0;
    // }

    // .x-resize {
    //   height: 0.6vh;
    //   background: #C0C4CC;
    //   cursor: s-resize;
    //   position: relative;
    // }

    // .bottom {
    //   height: 80%;
    //   background: #ECF5FF;
    //   border-radius: 0 0 10px 0;
    // }
  }
}

.container {
  width: 100%;
  padding-bottom: 20px;
}

.classroom {
  width: 225px;
  height: 171px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(145, 143, 143, 0.75);
  border-radius: 4px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  // margin-bottom: 20px;
  margin-top: 20px;
}

.classroom>div {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
  margin-bottom: 10px;
}

.classroom>div:nth-child(1) {
  // text-align: center;
  color: #333;
  border-bottom: 1px solid rgba(223, 223, 223, 0.699);
}

.device_title {
  width: 70px;
}

.device_value {
  color: #999;
  margin-left: 20px;
}

.devState {
  color: #129e29;
  margin-left: 20px;
}

.modle_content {
  margin-left: 20px;
}

.classRoomName {
  height: 47px;
  border-radius: 10px 10px 0 0;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  // color:#ffffff !important;
  line-height: 40px !important;
}

.classRoomName .classRoomN {
  font-size: 14px;
  // width: 125px;
  line-height: 15px;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // white-space: nowrap; // 默认不换行；
}

// .activeRoom {
//   // background: #1262ca;
// }
.unactiveRoom {
  background-color: rgb(84 90 101);
  border: 2px solid rgb(179, 179, 179);
}

.classSchedule {
  width: 54px;
  height: 24px;
  padding: 0;
  margin: 0 20px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  // margin-top: 10px;
}

.roomIcon {
  height: 20px;
  width: 20px;
  padding-left: 20px;
  padding-right: 5px;
}

.icon1 {
  height: 14px;
  width: 14px;
  padding-right: 5px;
}

.nodata {
  width: 100%;
  text-align: center;
  padding-bottom: 30px;
}
</style>